<template>
  <div class="DetailsSize">
    <div class="size" v-for="item in ShopSize.size">
      <div class="spanone">
        <span>{{ item[0] }}</span>
      </div>

      <div class="divone">
        <span>{{ item[1] }}</span>
        <span>{{ item[2] }}</span>
        <span>{{ item[3] }}</span>
        <span>{{ item[4] }}</span>
      </div>
    </div>
    <div class="desc" v-for="item in ShopSize.set">
      <div class="desc-s">
        <span>{{ item.key }}</span>
      </div>
      <div class="desc-c">
        <span>{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailsSize",
  props: {
    ShopSize: {
      Type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>

<style scoped>
.size {
  display: flex;
}
.desc {
  display: flex;
  width: 100%;
}
.spanone {
  width: 20%;

  text-align: center;
}
.desc:nth-child(1) {
  margin-top: 5vw;
}
.desc div {
  margin-bottom: 2vw;
}
.desc-s {
  width: 20vw;
  text-align: center;
}
.desc-c {
  text-align: center;
  width: 80vw;
}
.divone {
  width: 80%;
  text-align: center;
  text-align: center;
  display: flex;
  justify-content: space-around;
  margin-bottom: 2vw;
}
.DetailsSize {
    margin-bottom: 5vw;
    padding-top: 5vw;
}
</style>